<template>
  <view class="key" v-if="list && list.length > 0">
    <view class="item" v-for="item in list" :key="item.id">
      <view class="text" @click="handleSearch(item)">{{ item.tag }}</view>
    </view>
  </view>
</template>

<script>
/*
  TIP: 这里不是分类
  这里是搜索的关键字
 */

export default {
  props: ['list'],
  data() {
    return {
    }
  },
  methods: {
    // 跳转搜索
    handleSearch(item) {
      uni.navigateTo({
        url: `/sub_common/search/index?keyword=${item.tag}`
      })
    }
  },
  created() {
  },
  mounted() {
  },

}
</script>

<style scoped lang="scss">
.key {
  padding: 10rpx 20rpx;
  display: flex;
  overflow: hidden;
  //background: black;
  flex-wrap: wrap;
  .item {
    margin-right: 20rpx;
    padding: 5rpx 20rpx;
    border-radius: 20rpx;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;
    .text {
      color: white;
      font-size: 24rpx;
    }
  }
}
</style>
